<template>        
 <div>
       <el-form :inline="true" :model="advert" class="demo-form-inline">
  <el-form-item label="状态">
    <el-select v-model="advert.isShow" placeholder="请选择状态">
      <el-option label="展示中" value="1"></el-option>
      <el-option label="未展示" value="3"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="condition()">查询</el-button>
    <el-button type="primary" @click="add()">添加</el-button>
    <el-button icon="el-icon-delete" type="primary" @click="advert={}">清空</el-button>
  </el-form-item>
</el-form>
  <!-- 表格   -->
    <el-table
    :data="page.records"
    border
    style="width: 85%;">
        <el-table-column
        prop="id"
        label="广告ID"
        width="100">
        </el-table-column>
        <el-table-column
        prop=""
        label="广告"
         width="400">
        <template slot-scope="scope">
        <el-image
      style="width: 300px; height: 100px"
      :src="scope.row.image"></el-image>
        </template>
        </el-table-column>

        <el-table-column
        prop="tbRecruitmentInfo.title"
        label="招聘标题"
        width="180">
        </el-table-column>
      <el-table-column
        prop="isshow"
        label="状态"
         width="150">
        <template slot-scope="scope">
           <el-switch
         v-model="scope.row.isShow"
          @change = "saveOrUpdate(scope.row)"
         active-color="#13ce66"
         inactive-color="#ff4949"
         :active-value="1"
         :inactive-value="3">
        </el-switch>
        </template>
        </el-table-column>

        <el-table-column
        prop="isshow"
        label="展示"
         width="150">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isShow==1" effect="dark">展示中</el-tag>
          <el-tag type="danger" v-if="scope.row.isShow==3" effect="dark">未展示</el-tag>
        </template>
        </el-table-column>
         <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
          size="mini"
          type="wargin"
          @click="delById(scope.row.id)">删除</el-button>
         <el-button
           size="mini"
           type="waring"
           @click="editById(scope.row)">编辑</el-button>
        </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>

<el-dialog
  title="编辑"
  :visible.sync="dialogVisible"
  width="35%"
  :before-close="handleClose">
<el-form ref="form" :model="tbAdvert" label-width="120px">
  <el-form-item label="广告图">
    <el-upload
  class="avatar-uploader"
  action="http://localhost:18001/api/advert/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imgUrl" :src="imgUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
  <el-form-item label="招聘标题">
    <el-autocomplete
      class="inline-input"
      v-model="tbAdvert.title"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="success" @click="saveOrUpdate()">保 存</el-button>
  </span>
</el-dialog>

    </div>
</template>

<script>
import {conditionAdvert,saveOrUpdate,findById,selectTitle, delById} from '@/api/info'
export default {
    data() {
        return {
            page:{
                current:1,
                size:10,
                total:0
            },
            advert:{

            },
            dialogVisible:false,
            tbAdvert:{},
            imgUrl:''
        }
    },
    methods: {
      add(){
        this.imgUrl = ""
        this.tbAdvert = {}
        this.dialogVisible=true
      },
        async condition(){
            this.advert.size = this.page.size
            this.advert.current = this.page.current
           let {data} = await conditionAdvert(this.advert)
           this.page = data
        },
          handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        handleSizeChange(val) {
        this.page.size  = val
        this.condition()
        },
        handleCurrentChange(val) {
            this.page.current = val
            this.condition()
        },
       async editById(row){
          let {data} = await findById(row.id)
            this.tbAdvert = data;
            this.tbAdvert.title = row.tbRecruitmentInfo.title
            this.imgUrl = this.tbAdvert.image
            this.dialogVisible = true
        },
        handleAvatarSuccess(res, file) {
        let data = res.data
        this.tbAdvert.image = data
        this.imgUrl = data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      async saveOrUpdate(item){
          if(item==null){
            let {message} = await saveOrUpdate(this.tbAdvert)
            this.$message.success(message)
          }else{
            let {message} = await saveOrUpdate(item)
            this.$message.success(message)
          }
          this.condition()
          this.dialogVisible = false
      },
      async querySearch(queryString, cb) {
        let {data} = await selectTitle(queryString)
        var results = data
        results.forEach(item=>{
          item.value = item.title
        })
        cb(results);
      },
      handleSelect(item) {
            this.tbAdvert.recruitmentId = item.id
            console.log(this.tbAdvert)
      },
      async delById(id){
        let {message} = await delById(id);
        this.$message.success(message)
        this.condition()
      }
    },
    mounted() {
        this.condition()
    },
}
</script>

<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>